import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  DeviceEventEmitter,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import NavCon from '../../Public/NavCon';
import ModalExt from '../../Public/ModalExt';

import Base from '../../../utils/Base';

const { window } = Base;
const { width } = window;

class ModalContent extends Component {
  render() {
    return (
      <View style={[styles.modalBg, styles.flex]}>
        <View style={[styles.wrapper]}>
          <View style={styles.itemContainer}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item1, { borderTopLeftRadius: PxToDp(6),
                borderTopRightRadius: PxToDp(6),
                borderBottomWidth: 5 }]}
              onPress={() => {
                DeviceEventEmitter.emit('showToast', '焦点放大操作成功！');
                this.props.onPress();
              }
              }
            >
              <Text style={styles.text}>焦点放大</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item1]}
              onPress={() => {
                DeviceEventEmitter.emit('showToast', '参数演示操作成功！');
                this.props.onPress();
              }
              }
            >
              <Text style={styles.text}>参数显示</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item1, { borderBottomLeftRadius: PxToDp(6),
                borderBottomRightRadius: PxToDp(6),
                borderBottomWidth: 0 }]}
              onPress={() => {
                DeviceEventEmitter.emit('showToast', '动态演示操作成功！');
                this.props.onPress();
              }
              }
            >
              <Text style={styles.text}>动态演示</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            activeOpacity={0.6}
            style={styles.cancel}
            onPress={() => this.props.onPress()}
          >
            <Text style={styles.cancelText}>取消</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

class CoreTech extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  _goBack() {
    this.props.navigator.pop();
  }

  _setModalVisible(visible) {
    this.setState({ visible });
  }

  render() {
    return (
      <View style={[styles.bgColor, styles.flex, styles.titleTop]}>
        <NavCon currentTitle="核心科技" bgColor="#fff" onPress={() => this._goBack()} />
        <ScrollView contentContainerStyle={styles.scrollContainer}>
          <View style={[styles.row, styles.titleWrapper]}>
            <Image
              source={require('../../../img/oPower.png')}
              style={[styles.titleIcon]}
            />
            <Text style={[styles.title]}>动力性</Text>
          </View>
          <View style={[styles.row, styles.itemWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>发动机</Text>
            </TouchableOpacity>
          </View>

          <View style={[styles.row, styles.titleWrapper]}>
            <Image
              source={require('../../../img/oSafe.png')}
              style={[styles.titleIcon]}
            />
            <Text style={[styles.title]}>安全性</Text>
          </View>
          <View style={[styles.row, styles.itemWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>刹车</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>气囊</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>ABS</Text>
            </TouchableOpacity>
          </View>

          <View style={[styles.row, styles.titleWrapper]}>
            <Image
              source={require('../../../img/oSteering.png')}
              style={[styles.titleIcon]}
            />
            <Text style={[styles.title]}>操作性</Text>
          </View>
          <View style={[styles.row, styles.itemWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>变速系统</Text>
            </TouchableOpacity>
          </View>

          <View style={[styles.row, styles.titleWrapper]}>
            <Image
              source={require('../../../img/oMusic.png')}
              style={[styles.titleIcon]}
            />
            <Text style={[styles.title]}>娱乐性</Text>
          </View>
          <View style={[styles.row, styles.itemWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>多媒体</Text>
            </TouchableOpacity>
          </View>

          <View style={[styles.row, styles.titleWrapper]}>
            <Image
              source={require('../../../img/oInfortable.png')}
              style={[styles.titleIcon]}
            />
            <Text style={[styles.title]}>舒适性</Text>
          </View>
          <View style={[styles.row, styles.itemWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>静谧性</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>座椅设计</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>空间设计</Text>
            </TouchableOpacity>
          </View>

          <View style={[styles.row, styles.titleWrapper]}>
            <Image
              source={require('../../../img/oOther.png')}
              style={[styles.titleIcon]}
            />
            <Text style={[styles.title]}>其他</Text>
          </View>
          <View style={[styles.row, styles.itemWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>外观设计</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.item]}
              onPress={() => this._setModalVisible(true)}
            >
              <Text style={[styles.itemText]}>节能省油</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
        <ModalExt
          onRequestClose={() => this._setModalVisible(false)}
          animationType={'slide'}
          transparent
          visible={this.state.visible}
        >
          <ModalContent
            onPress={() => this._setModalVisible(false)}
          />
        </ModalExt>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: '#f8f8fb',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  scrollContainer: {
    width: '100%',
  },
  titleWrapper: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(45),
    paddingLeft: PxToDp(10),
  },
  titleIcon: {
    width: PxToDp(25),
    height: PxToDp(25),
    marginRight: PxToDp(10),
  },
  title: {
    color: '#333',
    fontSize: PxToDp(14),
  },
  itemWrapper: {
    alignItems: 'center',
    width: '100%',
    height: PxToDp(50),
    paddingLeft: PxToDp(16),
    backgroundColor: '#fff',
  },
  item: {
    justifyContent: 'center',
    alignItems: 'center',
    height: PxToDp(30),
    paddingLeft: PxToDp(19),
    paddingRight: PxToDp(19),
    marginRight: PxToDp(15),
    borderColor: '#ddd',
    borderWidth: PxToDp(1),
    borderRadius: PxToDp(100),
  },
  itemText: {
    color: '#333',
    fontSize: PxToDp(14),
  },
  modalBg: {
    justifyContent: 'flex-end',
    backgroundColor: 'transparent',
    alignItems: 'center',
    borderRadius: PxToDp(6),
  },
  wrapper: {
    justifyContent: 'flex-end',
    width: '100%',
    height: PxToDp(240),
    paddingLeft: PxToDp(17),
    paddingRight: PxToDp(17),
    paddingBottom: PxToDp(20),
    backgroundColor: 'transparent',
    borderRadius: PxToDp(6),
  },
  itemContainer: {
    width: PxToDp(width - 34),
    height: PxToDp(150),
    backgroundColor: '#fff',
    borderRadius: PxToDp(6),
    marginBottom: PxToDp(12),
  },
  cancel: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(width - 34),
    height: PxToDp(50),
    backgroundColor: '#fff',
    borderRadius: PxToDp(6),
  },
  cancelText: {
    color: '#333',
    fontSize: PxToDp(17),
    borderRadius: PxToDp(6),
  },
  item1: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(50),
    backgroundColor: '#fff',
    borderTopWidth: PxToDp(1),
    borderBottomWidth: PxToDp(1),
    borderColor: '#ededed',
  },
  text: {
    color: '#333',
    fontSize: PxToDp(17),
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});

export default CoreTech;
